<template>
  <div class="Root">
     <!-- 搜索结果页-头部导航 -->
      <div class="search-result-container">
        <!-- 点击实现后退效果 -->
        <van-nav-bar
          title="搜索结果"
          left-arrow
          @click-left="$router.go(-1)"
          fixed
        />
      </div>
      <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  :immediate-check="false"
>
      <ArticleItem @click.native="$router.push(`/article_detail?aid=${item.art_id}`)" :isShow="false" :artitem="item" v-for="item in articleList" :key="item.art_id"></ArticleItem>
      </van-list>
  </div>
</template>

<script>
import { suggestResultAPI, } from "@/api/index";
import ArticleItem from "@/components/ArticleItem.vue";

export default {
  name: 'SearchResult', 
  components:{
    ArticleItem
  },
  props:{},
  data(){
    return {
      page:1,
      articleList:[],
      loading: false,
      finished: false, 
    }
  },
  watch:{},
  computed:{},
  methods:{
    async onLoad(){
      console.log(this.articleList);
       console.log('正在发送请求');
       
       
      if(this.articleList.length>0){
        console.log('正在发送请求');
        this.page++
        const res = await suggestResultAPI({
        page:this.page,
        q:this.$route.params.keywords
     })
     if(res.data.data.results.length ===0){
      this.finished = true
      return
     }
     this.articleList = [...this.articleList,...res.data.data.results]
     this.loading = false
      }
    }
  },
  async created(){
     const res = await suggestResultAPI({
        page:this.page,
        q:this.$route.params.keywords
     })
     this.articleList = res.data.data.results
    
  },
  mounted(){}
}
</script>
<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>